iT邦幫忙

2025 iThome 鐵人賽

DAY 8
0
自我挑戰組

《轉職學習日記:JavaScript × Node.js × TypeScript × Docker × AWS ECS》系列 第 8

Day8 - 持續成長學習藍圖 - JavaScript (小作品_資料處理小工具)

  • 分享至 

  • xImage
  •  

今天要來個小挑戰,把這些東西組合起來,做一個簡單的作品:資料處理小工具

目標:

  • 從 JSON 檔案讀取資料
  • 篩選出符合條件的資料(例如分數 > 60)
  • 輸出成一個新的 JSON 檔案

這算是我第一次把學到的東西「串在一起用」,有點像小小的期中考。


準備資料

先建立一個 data.json,裡面放一些學生資料:

[
  { "name": "小明", "score": 80 },
  { "name": "小美", "score": 55 },
  { "name": "阿土", "score": 90 },
  { "name": "阿花", "score": 40 }
]

utils.js:寫工具函式

我先把計算平均分數的函式拆到 utils.js 裡:

export function average(arr) {
  let sum = arr.reduce((acc, n) => acc + n, 0);
  return arr.length > 0 ? sum / arr.length : 0;
}

index.js:讀檔 + 篩選 + 寫檔

這邊用到 Node.js 內建的 fs 模組來處理檔案。

import fs from "fs";
import { average } from "./utils.js";

// 1. 讀取 JSON 檔案
let rawData = fs.readFileSync("data.json", "utf-8");
let students = JSON.parse(rawData);

// 2. 篩選分數大於 60 的學生
let passed = students.filter(s => s.score >= 60);

// 3. 計算平均分數
let avgScore = average(students.map(s => s.score));

// 4. 輸出新的 JSON 檔案
fs.writeFileSync("passed.json", JSON.stringify(passed, null, 2));

console.log("及格學生名單已輸出到 passed.json");
console.log("全班平均分數:", avgScore);

執行結果會產生一個 passed.json

[
  { "name": "小明", "score": 80 },
  { "name": "阿土", "score": 90 }
]

使用 NPM 套件優化

我再加一個小功能:如果資料裡有重複的名字,用 lodash 幫我去掉。

先安裝:

npm install lodash

修改 index.js

import _ from "lodash";

let uniqueStudents = _.uniqBy(students, "name");
console.log("去除重複後:", uniqueStudents);

🎯 學習心得 / 今日收穫

今天算是第一次把前幾天的東西「串起來」做一個完整的小工具。
雖然很簡單,但過程中真的感受到:

  • 模組化:把平均分數抽到 utils.js,程式更乾淨。
  • 檔案讀寫:用 Node.jsfs 讀 JSON、寫 JSON,超有成就感。
  • 套件的好處:lodashuniqBy 一行就解決「去重複」的問題,比自己寫迴圈方便很多。

最大的心得是:
➡ 小作品雖然簡單,但能把學到的東西整合起來,才是真的有吸收。


上一篇
Day7 - 持續成長學習藍圖 - JavaScript (模組化與 NPM)
系列文
《轉職學習日記:JavaScript × Node.js × TypeScript × Docker × AWS ECS》8
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言